/**
 * 净值趋势
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC, NoDataC, SecondHeaderC } from '../../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';

@Form.create()
class NetValueTrend extends PureComponent {
  state = {};

  componentDidMount() {
    const { searchData } = this.props;
    if (this.props.searchData && this.props.searchData.portfolioCode) {
      this.getData(
        JSON.parse(
          JSON.stringify(searchData)
            .replace(/beginDate/g, 'startDate')
            .replace(/timeRange/g, 'rangeType'),
        ),
      );
    }
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(
        JSON.parse(
          JSON.stringify(nextProps.searchData)
            .replace(/beginDate/g, 'startDate')
            .replace(/timeRange/g, 'rangeType'),
        ),
      );
    }
  }
  componentWillUnmount() {
    // 离开前清除models数据
  }
  //  获取最大最小值
  getMaxAndMinNum = (arr1, ar2) => {
    const max1 = _.max(arr1);
    const max2 = _.max(ar2);
    const min1 = _.min(arr1);
    const min2 = _.min(ar2);
    const newArr =
      [
        [max1, min1],
        [max2, min2],
      ] || [];
    return newArr;
  };
  // 获取echarts数据
  getData = (searchProps) => {
    this.props.dispatch({
      type: 'netValueInProM/getReNetvaluelist',
      payload: searchProps,
    });
  };
  render() {
    const {
      netValueInProM: { netValueTrend },
      colorType,
    } = this.props;
    const xAxis = netValueTrend.xAxis;
    const series = netValueTrend.series;
    const data = series && series.length ? this.getMaxAndMinNum(series[0].data, series[1].data) : [];
    return (
      <div style={{ width: '100%', height: '100%' }}>
        {/* 净值趋势 */}
        <SecondHeaderC title='净值趋势' colorType={colorType} />
        <Spin spinning={this.props.loading.effects['netValueInProM/getReNetvaluelist'] == true}>
          {series?.length > 0 && xAxis?.length > 0 ? (
            <XYAxisChartsC
              dataZoom={true}
              yAxisUnit={[' ', '单位（%）']}
              series={series}
              xAxis={xAxis}
              height={334}
              type='line'
              yAxisRange={data}
              loading={this.props.loading}
              gridLeft={100}
              gridRight={100}
              colorType={colorType}
            />
          ) : (
            <NoDataC />
          )}
        </Spin>
      </div>
    );
  }
}
export default connect(({ netValueInProM, loading }) => ({
  netValueInProM,
  loading,
}))(NetValueTrend);
